<template>
  <a-layout>
    <a-layout-content id="forgot-layout">
      <div
        id="forgot-main-layout"
        :style="{ width: mobile ? '350px' : '500px' }"
      >
        <a-form
          id="forgot-form-layout"
          :style="{ width: mobile ? '250px' : '500px' }"
          :form="form"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 15 }"
          @submit="forgotSubmit"
          @submit.native.prevent
        >
          <!-- 账号 -->
          <a-form-item label="重置账号邮箱">
            <a-input
              v-decorator="[
                'email',
                {
                  rules: [
                    { required: true, message: '请输入要重置密码的账号邮箱' },
                    {
                      pattern: /(^[\w-]+@[\w-]+(\.[\w-]+)+$)/,
                      message: '请输入正确账号邮箱',
                    },
                  ],
                },
              ]"
              placeholder="请输入要重置密码的账号邮箱"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <!-- 重置验证码 -->
          <a-form-item label="重置验证码">
            <a-input
              style="float: left; width: 55%"
              v-decorator="[
                'captcha',
                {
                  rules: [{ required: true, message: '请输入重置验证码' }],
                },
              ]"
              placeholder="请输入重置验证码"
            >
              <a-icon
                slot="prefix"
                type="safety"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
            <a-button
              id="forgot-captcha-button"
              html-type="button"
              :disabled="isCaptcha"
              @click="resetEmailCaptcha"
            >
              {{ captcha }}
            </a-button>
          </a-form-item>
          <!-- 重置密码 -->
          <a-form-item label="重置密码">
            <a-input-password
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请输入重置后密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入重置后密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input-password>
          </a-form-item>
          <!-- 二次确认 -->
          <a-form-item label="二次确认密码">
            <a-input-password
              v-decorator="[
                'secondaryPassword',
                {
                  rules: [
                    { required: true, message: '请输入二次确认密码' },
                    { min: 8, message: '请输入8~12位密码' },
                    { max: 12, message: '请输入8~12位密码' },
                  ],
                },
              ]"
              type="password"
              placeholder="请输入二次确认密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input-password>
          </a-form-item>
          <!-- 重置密码按钮 -->
          <a-form-item :wrapper-col="{ span: 12, offset: mobile ? 0 : 6 }">
            <a-button type="primary" html-type="submit" :loading="isLoad">
              重置
            </a-button>
            <a-button
              id="forgot-clear"
              :loading="isLoad"
              style=""
              @click="clear"
            >
              清空
            </a-button>
            <div>
              或
              <a href="javascript:;" @click="loginFrom"> 返回登录 </a>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Forgot",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "Forgot" });
  },
  data() {
    return {
      captcha: "获取验证码",
      isCaptcha: false,
      isLoad: false,
    };
  },
  computed: {
    mobile() {
      return this.$mobile;
    },
  },
  methods: {
    ...mapActions("user", {
      emailCaptcha: "emailCaptcha",
      reset: "reset",
    }),
    // 发送重置邮箱验证码
    resetEmailCaptcha(e) {
      e.preventDefault();
      let email = this.form.getFieldValue("email");
      // 验证账号部分
      if (email == undefined) {
        this.$message.error("请输入邮箱");
      } else {
        // 60秒处理时间
        this.isCaptcha = true;
        this.$message.loading("发送邮箱验证码中......", 0);
        let result = this.emailCaptcha(email);
        result
          .then((value) => {
            let time60 = 60;
            let _this = this;
            this.captcha = time60;
            let count = setInterval(function () {
              if (time60 != 0) {
                time60 -= 1;
                _this.captcha = time60;
              } else {
                clearInterval(count);
                _this.isCaptcha = false;
                _this.captcha = "获取验证码";
              }
            }, 1000);
            this.$notification.open({
              message: "验证码已发送至邮箱",
            });
          })
          .catch((error) => {
            this.isCaptcha = false;
            this.$message.error("验证码发送失败");
          });
      }
    },
    // 发送重置表单
    forgotSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // 密码二次校验
          if (values.secondaryPassword == values.password) {
            let formData = new FormData();
            formData.append("email", values.email);
            formData.append("newPwd", values.password);
            formData.append("captcha", values.captcha);
            this.isLoad = true;
            this.$message.loading("重置密码中......", 0);
            let result = this.reset(formData);
            result
              .then((value) => {
                this.$message.success("重置成功");
                this.$bus.$emit("switchLoginRegister", "login");
                this.$router.replace({
                  name: "Login",
                });
              })
              .catch((error) => {
                this.isLoad = false;
              });
          } else {
            this.$message.error("两次密码不一致");
          }
        }
      });
    },
    // 清空表单
    clear() {
      this.form.setFieldsValue({
        email: undefined,
        password: undefined,
        secondaryPassword: undefined,
        captcha: undefined,
      });
    },
    // 返回登录界面
    loginFrom(e) {
      e.preventDefault();
      this.$bus.$emit("switchLoginRegister", "login");
      this.$router.replace({
        name: "Login",
      });
    },
  },
};
</script>

<style scoped>
#forgot-layout {
  background: #fff;
}
#forgot-main-layout {
  margin: 80px auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
}
#forgot-form-layout {
  margin: 70px auto;
  max-width: 400px;
  min-width: 25px;
}
#forgot-captcha-button {
  width: 41%;
  float: right;
  text-align: center;
}
#forgot-clear {
  margin-left: 10px;
}
</style>